<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<title>中智融通</title>
		<style>
			html, body {
				margin: 0;
				padding: 0;
				height: 100%;
				background-color: #F0EED9;
				font: normal 100% Helvetica, Arial, sans-serif;
			}
			.head {
				background-image: url("");
				background-size: 100% 100%;
				-webkit-box-sizing: border-box;
				box-sizing: border-box;
			}
			.main {
				position: relative;
				-webkit-box-sizing: border-box;
				box-sizing: border-box;
			}
			.main .title {
				font-weight: bold;
				vertical-align: middle;
				font-size: 1.2em;
				width: 90%;
				margin-left: auto;
				margin-right: auto;
			}
			.main .title span {
				display: inline-block;
				vertical-align: middle;
			}
			.main .content {
				position: absolute;
				top: 60%;
				left: 50%;
				-webkit-transform: translate(-50%,-50%);
				transform: translate(-50%,-50%);
			}
			.footer {
				margin-left: 10%;
				margin-right: 10%;
				-webkit-box-sizing: border-box;
				box-sizing: border-box;
			}

			.btn {
				display: inline-block;
				width: 100%;
				padding: 6px 12px;
				margin-bottom: 0;
				font-size: 1.2em;
				font-weight: normal;
				line-height: 1.42857143;
				text-align: center;
				white-space: nowrap;
				vertical-align: middle;
				cursor: pointer;
				-webkit-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;
				background-image: none;
				border: 1px solid transparent;
				border-radius: 4px;
				-webkit-box-sizing: border-box;
				box-sizing: border-box;
			}
			.btn:focus, .btn:active:focus, .btn.active:focus {
				outline: thin dotted;
				outline: 5px auto -webkit-focus-ring-color;
				outline-offset: -2px;
			}
			.btn:hover, .btn:focus {
				color: #333;
				text-decoration: none;
			}
			.btn:active, .btn.active {
				background-image: none;
				outline: 0;
				-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
				box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
			}
			.btn-primary {
				color: #fff;
				background-color: #428bca;
				border-color: #357ebd;
			}
			.btn-primary:hover, .btn-primary:focus {
				color: #fff;
				background-color: #3276b1;
				border-color: #285e8e;
				line-height: 1.42857143;
			}
			a {
				outline: none;
				text-decoration: none;
			}
			.message {
				display: none;
				position: absolute;
				top: 50%;
				left: 50%;
				min-width: 30%;
				max-width: 80%;
				padding: 12px;
				border-radius: 5px;
				z-index: 500;
				background-color: #ddd;
				font-size: 1em;
				word-wrap: break-word;
				word-break: break-all;
				-webkit-transform: translate(-50%, -50%);
				transform: translate(-50%, -50%);
			}
		</style>
	</head>
	<body>
		<div class="container" id="container">
			<input type="hidden" id="openId"  value="${openId}"/>
			<div class="head" id="head"></div>
			<div class="main" id="main">
				<div class="title" id="title">
					<span>您好，您正申请报修服务，请选择以下服务：</span>
				</div>
				<div class="content" id="content">
					<a id="button1" class="btn btn-primary" href="tel:4007000008">
						免费电话联系客服报修
					</a>
					<div id="block"></div>
					<a type="button" id="button2" class="btn btn-primary">
						微信直接报修
					</a>
				</div>
			</div>
			<div class="message" id="message"></div>
			<div class="footer" id="footer">
				备注：信息提交成功后，我司将尽快联系你处理。
			</div>
		</div>
		<script>
			document.body.onload = function() {
				var clientHeight = document.body.clientHeight;
				document.getElementById('container').style.height = clientHeight + 'px';
				
				document.getElementById('head').style.height = 0.21 * clientHeight + 'px';
				
				var main = document.getElementById('main');
				main.style.height = 0.69 * clientHeight + 'px';
				
				var title = document.getElementById('title');
				title.style.paddingTop = 0.02*clientHeight + 'px';
				title.style.paddingBottom = 0.02*clientHeight + 'px';
				
				document.getElementById('footer').style.height = 0.10 * clientHeight + 'px';
				
				document.getElementById('block').style.height = 0.1*clientHeight + 'px';
				var button1 = document.getElementById('button1');
				
				var button2 = document.getElementById('button2');
				
				button2.onclick = function() {
					window.location.href = '<%=request.getContextPath()%>/weixin/repair/add?openId=${openId}';
				}
			}
			alert = function showMessage(msg){
				var message = document.getElementById('message');
				message.style.display = 'block';
				message.innerText = msg;
				setTimeout(function(){
					var i = 0;
					var interValId = setInterval(function(){
						var message = document.getElementById('message');
						if(i > 10){
							clearInterval(interValId);
							message.style.display = 'none';
							message.style.opacity = 1.0;
						}else{
							message.style.opacity = 1.0 - i*0.1;
						}
						i++;
					}, 100);
				}, 2500)
			}
		</script>
	</body>
</html>